<template>
  <div class="">
    <el-dialog
        v-model="showDialog"
        title="批量导入"
        width="1200px"
        class="content-import-box"
        :close-on-click-moda="false"
        :close-on-press-escape="false"
        :before-close="beforeClose"
    >
      <!-- 第一步 -->
      <div class="step-num1" v-if="stepNum == 1">
        <el-upload
            ref="uploadRef"
            class="options-item import-word"
            :show-file-list="false"
            :http-request="handleUpload"
            :on-exceed="handleExceed"
            v-model:file-list="wordUploadList"
            multiple
            accept=".docx"
            drag
        >
          <div style="margin: 70px 0">
            <div v-if="wordUploadList.length === 0">
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                将word文件拖动到此处上传 或者<em>点击这里</em>,doc格式兼容性较差,推荐使用docx格式
              </div>
            </div>
            <div v-else>
              <div class="file-list">
                <li v-for="item in wordUploadList" :key="item.uid">
                  <i class="iconfont">&#xedd5;</i>
                  <p>{{item.name}}</p>
                  <i class="iconfont delete" @click.stop="handleFileDelete(item)">&#xeb6a;</i>
                  <span v-if="item.size > 1024 * 1024 * 50" class="big-file"><i class="iconfont">&#xe8e5;</i> 该文件过大，转存可能较慢</span>
                  <div style="margin-left:10px;">
                    <el-tag type="success" v-if="item.imgDump == 1">转存成功</el-tag>
                    <el-tag type="danger" v-else-if="item.imgDump == 2">转存失败</el-tag>
                    <el-button size="small" v-else-if="step1Loading" :loading="true">转存中...</el-button>
                  </div>
                </li>
              </div>
            </div>
          </div>
          <template #tip>
            <div class="el-upload__tip" style="margin-top: 10px;font-size: 14px;">
              导入后编辑器将插入word中的内容，不支持的样式或图片可能无法展示，请确认后发布
            </div>
          </template>
        </el-upload>
      </div>
      <!-- 第二步 -->
      <div class="step-num2" v-if="stepNum == 2">
        <el-table :data="resContentList" style="width: 100%" max-height="700px" v-loading="resContentList.length < 1">
          <el-table-column prop="title" label="标题">
            <template #default="{row}">
              <el-input v-model="row.title" style="width:180px"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="comefrom" label="来源">
            <template #default="{row}">
              <el-input v-model="row.comefrom" placeholder="请输入"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="publish_time" label="发布时间" >
            <template #default="{row}">
              <el-date-picker
                v-model="row.publish_time"
                type="datetime"
                placeholder="选择时间"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </template>
          </el-table-column>
          <el-table-column prop="scanResult" label="扫描结果">
            <template #header>
              <span>扫描结果</span>
              <el-dropdown>
                <el-button class="more-btn" text size="small">
                  <i class="iconfont">&#xe6dc;</i>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item type="primary" plain size="small" @click="handleIgnoreAllWord(element)">全部忽略</el-dropdown-item>
                    <el-dropdown-item type="primary" plain size="small" @click="handleSafeScan(element)">重新扫描</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
            <template #default="{row}">
              <el-tag type="success" v-if="scanState[row.locId] == 2">通过</el-tag>
              <el-tag type="success" v-else-if="scanState[row.locId] == 99">已忽略</el-tag>
              <el-tag type="danger" v-else-if="scanState[row.locId] == 3">未通过</el-tag>
              <span v-else>扫描中...</span>
              <el-button v-if="scanState[row.locId] == 3" class="more-btn" type="primary" link @click="handleCheckScanResult(row)">查看</el-button>
              <el-button v-if="scanState[row.locId] == 3" class="more-btn" type="primary" link @click="handleIgnoreWord(row)">忽略</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{row}">
              <el-button class="more-btn" type="primary" link @click="handleOnlineEdit(row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" v-if="stepNum == 1" @click="handleDispose" :disabled="!wordUploadList.length" :loading="step1Loading">
            <span v-if="step1Loading">图片转存中...</span>
            <span v-else>下一步</span>
          </el-button>
          <el-button type="primary" v-if="stepNum == 2" @click="handleBack">上一步</el-button>
          <el-button type="primary" v-if="stepNum == 2" @click="handleSubmit" :disabled="!editorContentList.length || disabledBtn || scanLoading" :loading="submitLoading">确认</el-button>
          <el-button @click="beforeClose">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
        v-model="showArticleList"
        title="待发布列表"
        width="640px"
    >
      <el-table :data="articleWaitingList" style="width: 100%;">
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="status" label="处理状态" >
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 安全扫描 -->
    <el-dialog
        v-model="showScanDialog"
        title="扫描结果"
        width="640px"
    >
      <div class="scan-result-dialog" v-if="showScanDialog">
        <div class="scan-result-box" v-if="JSON.stringify(scanResultFields) !== '{}'">
          <el-tabs v-model="activeScanResult[curRowId]" @tab-click="handleChooseScanField">
            <el-tab-pane :label="resultItem.field_name" v-for="(resultItem,resultKey) in scanResultFields[curRowId]" :name="resultKey" :key="resultKey"></el-tab-pane>
          </el-tabs>
          <div class="scan-result-title">
            <el-button :type="scanResultType[curRowId] === '0' ? 'primary' : ''" size="small" round @click="chooseScanType('0')">全部</el-button>
            <el-button :type="scanResultType[curRowId] === key ? 'primary' : ''" v-for="(val, key) in scanResult" :key="key" size="small" round @click="chooseScanType(key)">{{
                key === "errorWords"
                    ? "疑错词语"
                    : key === "riskWords"
                    ? "风险词语"
                    : "暗链/外链"
              }}·{{ val?.length || 0 }}</el-button>
          </div>
          <div class="result-box-body-outer">
            <el-scrollbar>
              <div class="result-box-body" v-if="scanResultTable.length !== 0">
                <div
                    class="result-word"
                    v-for="(item,index) in scanResultTable"
                    :key="index"
                    :class="{
                      'level-1': item.levelId === 1,
                      'level-2': item.levelId === 2,
                      'level-3': item.levelId === 3,
                      'level-link': !item.levelId
                    }">
                  <div v-if="item.storeId">
                    <div class="word-top">
                      <p @click.stop="handleChangeShowMore(item)">
                        <i class="iconfont" :class="{'is-collapse':item.showMore}">&#xe601;</i>
                        <span class="level-span">{{item.level}}</span>
                        <span>{{item.word}}</span>
                      </p>
                      <span class="adjust-word" v-show="item.adjustWord">建议:{{item.adjustWord}}</span>
                    </div>
                    <el-collapse-transition>
                      <div class="word-more-msg" v-show="item.showMore">
                        <el-descriptions title="" :column="1">
                          <el-descriptions-item label="涉及法规:"><span class="descriptions-text">{{item.law}}</span></el-descriptions-item>
                          <el-descriptions-item label="描述:"><span class="descriptions-text">{{item.description}}</span></el-descriptions-item>
                        </el-descriptions>
                      </div>
                    </el-collapse-transition>
                    <div class="word-bottom">
                      <p>
                        所在词库:{{item.storeName}}
                      </p>
                      <div class="button-box">
  <!--                                    <el-button v-show="isEditorClass(activeScanResult)" type="primary" round size="small" @click="handleIgnoreWord(item)">忽略</el-button>-->
                        <!-- <el-button v-show="isEditorClass(activeScanResult)" type="primary" round size="small" @click="handleChangeWord(item)">替换</el-button> -->
  <!--                                    <el-button v-show="isEditorClass(activeScanResult)" type="primary" round size="small" @click="handleDeleteWord(item)">删除</el-button>-->
                      </div>
                    </div>
                  </div>
                  <div v-else>
                    <div class="url-name" style="margin-bottom: 15px">
                      <span class="level-span">{{item.level}}</span>
                      <p>{{item.word}}</p>
                    </div>
                    <div class="word-bottom">
                      <p>
                        外部链接
                      </p>
                      <div class="button-box">
                        <el-button type="primary" round size="small" @click="handleOpenLink(item)">打开链接</el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="result-box-body-empty" v-else>
                当前筛选下已经全部处理完成！
              </div>
            </el-scrollbar>
          </div>
        </div>
        <div v-else class="no-scan-result">
          <i class="iconfont">&#xe642;</i>
          <p>暂无检测结果</p>
        </div>
      </div>
    </el-dialog>
    <!-- 在线编辑word -->
    <el-dialog
      v-if="showEditorContent"
      v-model="showEditorContent"
      :title="`编辑-${curOnlineForm.title}`"
      width="1000px"
      align-center
    >
      <template #header>
        <div class="cur-online-form-header">{{`编辑-${curOnlineForm.title}`}}</div>
      </template>
      <TinymceEditor
        ref="showTinymceEditorRef"
        :editorName="`showTinymceEditorName`"
        :modelValue="curOnlineForm.content"
        :title="curOnlineForm.title"
        :maxHeight="700"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="onlineEditSubmit">确认</el-button>
          <el-button @click="showEditorContent = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 用于获取编辑器内容 不作显示 -->
    <div class="editor-tool" v-if="editorContentList.length">
      <div v-for="(item, index) in editorContentList" :key="index">
        <TinymceEditor
          :editorName="`${item.locId}`"
          :ref="el => getRiskSpreadRef(el, index)"
          :modelValue="item.content"
          :title="item.title"
          v-model:imgTaskEnd="item.imgTaskEnd"
          />
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed, nextTick, ref, watch } from "vue";
import { UploadFilled } from "@element-plus/icons-vue"
import { ElMessage, ElMessageBox } from "element-plus";
import axios from 'axios'
import { insertContentByImport, batchImportArticle } from "@/api/content";
import {contentScan} from "@/api/safe";

const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  },
  catId: {
    type: [String, Number]
  },
  typeId: {
    type: [String, Number]
  },
})
const emits = defineEmits(['update:showDialog', 'getTableList'])
const showDialog = computed({
  set: (val) => {
    emits('update:showDialog',val)
  },
  get: () => props.showDialog
})

const wordUploadList = ref([])     // 上传列表
const articleWaitingList = ref([]) // 待处理文章列表
const showArticleList = ref(false)
const handleExceed = () => {
  ElMessage({
    showClose: true,
    message: '一次只允许处理10个word文档',
    type: 'warning'
  })
}
const uploadRef = ref()
/*
* 批量导入思路：
* 1.word上传  (手动上传)
* 2.关闭上传弹框(标题，来源部门，状态，操作)
*   状态： 0：待处理， 1： 处理中  2：已处理  3：处理失败
*   操作： 删除，重新处理（处理失败）
* 3.处理过程*
*   一、软件或接口获取内容
*   二、图片转存
*   三、更改处理状态
*   四、队列处理及上一个处理完毕处理下一个
* 4.调用批量上传接口
* */
const handleUpload = async (file) => {
  console.log('file',file);
}
const stepNum = ref(1)
const step1Loading = ref(false)
const handleBack = () => {
  wordUploadList.value.forEach(item => item.imgDump = null)

  userOnblur.value = false
  toolTip.value = 0
  stepNum.value = 1
}
const handleDispose = async () => {
  step1Loading.value = true
  articleWaitingList.value = wordUploadList.value.map(item => {
    return {
      title: item.name,
      status: 0
    }
  })
  riskSpreadRefList.value = []
  resultInfo.value = {}
  scanResultFields.value = {}
  scanResultType.value = {}
  scanState.value = {}
  editorContentList.value = []
  resContentList.value = []
  for (let index = 0; index < wordUploadList.value.length; index++) {
    const item = wordUploadList.value[index];
    // try {
      await getArticleContent(item.raw)
      item.imgDump = 1
      if(originalImport.value) break;//未下载插件时
    // } catch (error) {
    //   item.imgDump = 2
    // }
  }
  stepNum.value = 2
  step1Loading.value = false
}
// 获取所有编辑器内容
const riskSpreadRefList = ref([])
const resContentList = ref([])
const getRiskSpreadRef = (el, index) => {
  if (el) {
    riskSpreadRefList.value[index] = el;
  }
};
const formattedDate = () => {
  const currentDate = new Date();
  const year = currentDate.getFullYear();
  const month = String(currentDate.getMonth() + 1).padStart(2, '0');
  const day = String(currentDate.getDate()).padStart(2, '0');
  const hours = String(currentDate.getHours()).padStart(2, '0');
  const minutes = String(currentDate.getMinutes()).padStart(2, '0');
  const seconds = String(currentDate.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
//html内容列表 用于编辑器做转存
const toolTip = ref(0)
const originalImport = ref(false)
const userOnblur = ref(false)
const editorContentList = ref([])
const getArticleContent = (file) => {
  return new Promise((resolve)=>{
    let locId = Date.now() + "_" + Math.ceil(Math.random() * 99999)
    const importUrl = "http://127.0.0.1:10086/upload"
    let formData = new FormData();
    formData.append('file',file)
    axios.post(importUrl,formData,{
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }).then(res => {
      const tempDiv = document.createElement('div');
      tempDiv.id = `temp-content-div-${locId}`
      tempDiv.style.display = 'none';
      document.body.appendChild(tempDiv)
      const did = document.getElementById(`temp-content-div-${locId}`)
      did.innerHTML = res.data.data
      let styleTag = document.querySelector(`#temp-content-div-${locId}>style`)
      let content = document.querySelector(`#temp-content-div-${locId}>div`)
      content.style = '';
      // 获取 style 标签中的样式规则
      let styleSheet = styleTag.sheet;
      let cssRules = styleSheet.cssRules || styleSheet.rules;
      // 遍历每个样式规则
      Array.from(cssRules).forEach(cssRule => {
        let selectorText = cssRule.selectorText;
        let style = cssRule.style;
        // 获取匹配样式规则的元素
        let elements = content.querySelectorAll(selectorText);
        // 将样式应用到元素的行内样式
        Array.from(elements).forEach((element) => {
          // 应用样式规则到元素的行内样式
          for (let i = 0; i < style.length; i++) {
            const propName = style[i];
            const propValue = style.getPropertyValue(propName);
            if(!element.style[propName]) element.style[propName] = propValue;
          }
        });
      });
      // 移除 style 标签
      styleTag.parentNode.removeChild(styleTag);
      did.remove()
      if(res.data?.data){
        editorContentList.value.push({
          locId: locId,
          title: file.name.replace(/\.docx$/, ""),
          content: did.innerHTML,
          imgTaskEnd: false,
        })
      }
      resolve()
    }).catch((error) => {
      if(!originalImport.value){
        console.log('dddd',error)
        const foxClipLink = document.createElement('a');
        foxClipLink.href = 'foxc://';
        foxClipLink.target = '_self';
        foxClipLink.click();
        // 判断用户界面失焦
        // let userOnblur = false
        window.onblur = function() {
          userOnblur.value = true
          toolTip.value++
          step1Loading.value = false
        };
      }
      setTimeout(async() => {
        if(originalImport.value){ //如果已经点击过原始导入, 不下载插件直接导入
          for (let index = 0; index < wordUploadList.value.length; index++) {
            let locId2 = Date.now() + "_" + Math.ceil(Math.random() * 99999)
            const item = wordUploadList.value[index];
            let res = await insertContentByImport({file: item.raw})
            editorContentList.value.push({
              locId: locId2,
              title: item.name,
              content: res.data.content,
            })
            resContentList.value.push({
              locId: locId2,
              title: item.name,
              comefrom: '',
              publish_time: formattedDate(),
              catid: props.catId,
              content: res.data.content,
              typeId: props.typeId
            })
            safeScanApi(res.data.content, locId2)
          }
          stepNum.value = 2
          step1Loading.value = false
          resolve()
        }else if(!userOnblur.value && toolTip.value < 1){
          toolTip.value++
          ElMessageBox.confirm(
              '<div><p style="font-size: 16px;margin-bottom: 15px;">下载粘贴导入工具，下载文件包内含安装步骤</p></div>',
              '下载确认',
              {
                distinguishCancelAndClose: true,
                dangerouslyUseHTMLString: true,
                confirmButtonText: '确认下载',
                cancelButtonText: '暂不安装（使用原始导入）',
              }).then( () => {
                toolTip.value = 0
                window.open('//api.my120.org/锐狐粘贴插件v3.1.zip')
          }).catch(async (action) => {
            if(action === 'cancel') { //不下载插件直接导入
              originalImport.value = true
              for (let index = 0; index < wordUploadList.value.length; index++) {
                let locId2 = Date.now() + "_" + Math.ceil(Math.random() * 99999)
                const item = wordUploadList.value[index];
                let res = await insertContentByImport({file: item.raw})
                editorContentList.value.push({
                  locId: locId2,
                  title: item.name,
                  content: res.data.content,
                })
                resContentList.value.push({
                  locId: locId2,
                  title: item.name,
                  comefrom: '',
                  publish_time: formattedDate(),
                  catid: props.catId,
                  content: res.data.content,
                  typeId: props.typeId
                })
                safeScanApi(res.data.content, locId2)
              }
              stepNum.value = 2
              step1Loading.value = false
              resolve()
            }
          })
        }
      },300)
    })
  })
}
// 监听编辑器所有转存任务完成后再取数据
watch(editorContentList,() => {
  setTimeout(() => {
    if(riskSpreadRefList.value.every(item => item.imgTaskEnd)){
      scanResultFields.value = []
      scanState.value = {}
      resContentList.value = []
      riskSpreadRefList.value.forEach(item => {
        resContentList.value.push({
          locId: item.editorName,
          title: item.title,
          comefrom: '',
          publish_time: formattedDate(),
          catid: props.catId,
          content: item.content,
          typeId: props.typeId
        })
        safeScanApi(item.content, item.editorName)
      });
    }
  }, 0);
},{deep:true})
// 发布设置
const showTinymceEditorRef = ref()
const showEditorContent = ref(false)
// 在线编辑
const curOnlineForm = ref({})
const handleOnlineEdit = (val) => {
  curOnlineForm.value = val
  showEditorContent.value = true
}
// 在线编辑 提交
const onlineEditSubmit = () => {
  nextTick(()=>{
    if(showTinymceEditorRef.value){
      curOnlineForm.value.content = showTinymceEditorRef.value.content
      safeScanApi(curOnlineForm.value.content, curOnlineForm.value.locId)
    }
    showEditorContent.value = false
  })
}
const reset = () => {
  stepNum.value = 1
  userOnblur.value = false
  toolTip.value = 0
  editorContentList.value = []
  resContentList.value = []
  if(uploadRef.value){
    uploadRef.value.clearFiles()
    uploadRef.value.uploadFiles = []
  }
  riskSpreadRefList.value = []
  wordUploadList.value = []
  submitLoading.value = false
  showDialog.value = false
}
const beforeClose = () => {
  if(wordUploadList.value.length){
    ElMessageBox.confirm(
      '<div><p style="font-size: 16px;margin-bottom: 15px;">是否确认取消上传</p></div>',
      '操作确认',
      {
        distinguishCancelAndClose: true,
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      }).then( () => {
        reset()
    })
  }
  if(stepNum.value == 1 && !wordUploadList.value.length){
    showDialog.value = false
  }
}
// 发布提交
const submitLoading = ref(false)
const handleSubmit = async () => {
  submitLoading.value = true
  let res = null
  if(props.typeId == '1'){ //typeId已发布
    res = await batchImportArticle(resContentList.value)
  }else if(props.typeId == '4'){ //typeId草稿箱
    res = await batchImportArticle(resContentList.value)
  }
  if(res.code == 20000){
    ElMessage({
      showClose: true,
      message: '导入成功',
      type: 'success'
    })
    submitLoading.value = false
    emits('getTableList')
  }
  reset()
}
const showScanDialog = ref(false)
let curRowId = ref(null)
const handleCheckScanResult = (row) => {
  curRowId.value = row.locId
  showScanDialog.value = true
}
// 扫描结果
const scanResultType = ref({})
// const scanResult = ref({})
const scanState = ref({}) // 扫描状态(1: 扫描中, 2: 通过, 3: 不通过)
const showScanning = ref(false) // 安全检测中
const scanResultFields = ref({})  //所有字段扫描结果
const activeScanResult = ref({})  //当前字段
const showScanResult = ref(false)
// 当前字段的数据
const scanResult = computed(() => {
  return scanResultFields.value[curRowId.value][activeScanResult.value[curRowId.value]].result
})
const scanResultTable = computed(() => {
  let resultList = []
  if(scanResultType.value[curRowId.value] === "0"){
    for (let item in scanResultFields.value[curRowId.value][activeScanResult.value[curRowId.value]].result) {
      resultList = resultList.concat(
        scanResultFields.value[curRowId.value][activeScanResult.value[curRowId.value]].result[item] || []
      )
    }
  }else{
    resultList = scanResultFields.value[curRowId.value][activeScanResult.value[curRowId.value]].result[scanResultType.value[curRowId.value]]
  }
  return resultList
})
// 扫描全部通过才能点击提交按钮
const disabledBtn = computed(()=>{
  if(Object.values(scanState.value).length != resContentList.value.length){
    return true
  }else{
    return !Object.values(scanState.value).every(item => {
      return item && [2, 99].includes(item)
    })
  }
})

// 忽略
const handleIgnoreWord = (row) => {
  ElMessageBox.confirm(
    '<div><p style="font-size: 16px;margin-bottom: 15px;">是否确认忽略</p></div>',
    '操作确认',
    {
      distinguishCancelAndClose: true,
      dangerouslyUseHTMLString: true,
      confirmButtonText: '确认',
      cancelButtonText: '取消',
    }).then( () => {
      scanState.value[row.locId] = 99 //忽略
  })
}
// 全部忽略
const handleIgnoreAllWord = () => {
  ElMessageBox.confirm(
    '<div><p style="font-size: 16px;margin-bottom: 15px;">是否确认全部忽略</p></div>',
    '操作确认',
    {
      distinguishCancelAndClose: true,
      dangerouslyUseHTMLString: true,
      confirmButtonText: '确认',
      cancelButtonText: '取消',
    }).then( () => {
      for (const key in scanState.value) {
        if(scanState.value[key] != 2){
          scanState.value[key] = 99 //忽略
        }
      }
  })
}
const handleOpenLink = (data) => {
  window.open(data.url,'_blank')
}
// 扫描
const resultInfo = ref([])
const safeScanApi = (content, locId) => {
  return new Promise((resolve, reject) => {
    submitLoading.value = true
    contentScan({content: content, catid: props.catId}).then((res) => {
      if (res.data.pass === 1) {
        scanState.value[locId] = 2
        // 清空扫描结果
        scanResultFields.value[locId] = {}
      } else {
        scanState.value[locId] = 3
        // 关闭正在扫描,弹出文本窗口
        showScanning.value = false
        resultInfo.value = []
        scanResultFields.value[locId] = res.data.information
        // 当前字段
        activeScanResult.value[locId] = Object.keys(res.data.information)[0]
        // 当前类型 0全部
        scanResultType.value[locId] = "0"
        // 处理res数据
        for(let item in res.data.information){
          let _result = {
            field: res.data.information[item].field_name,
            backLinksNum: res.data.information[item].result.backLinks?.length || 0,
            errorWordsNum: res.data.information[item].result.errorWords?.length || 0,
            riskWordsNum: res.data.information[item].result.riskWords?.length || 0
          }
          // resultInfo.value.push(_result)
          resultInfo.value = _result
        }
        showScanResult.value = true
      }
      submitLoading.value = false
      resolve()
    }).catch(() => {
      scanState.value[locId] = 3
      reject()
    })
  })
}
const scanLoading = ref(false)
const handleSafeScan = async () => {
  scanState.value = {}
  resContentList.value.forEach(async item => {
    await safeScanApi(item.content, item.locId)
  })
}
const handleChooseScanField = (key) => {
  scanResultType.value[curRowId.value] = "0"
  activeScanResult.value = key.paneName
}
const chooseScanType = (key) => {
  scanResultType.value[curRowId.value] = key
}
const handleChangeShowMore = (data) => {
  data.showMore = !data.showMore
}
const handleFileDelete = (row) => {
  wordUploadList.value = wordUploadList.value.filter(item => item.uid != row.uid)
}
</script>
<style scoped lang="scss">
.file-list{
  text-align: left;
  li{
    display: flex;
    align-items: center;
    margin: 5px 0;
    i{
      margin-right: 10px;
    }
    i.delete{
      color: $mainColor;
      margin-left: 10px;
      font-size: 16px;
    }
  }
}
.editor-tool{
  position: absolute;
  top: -99999px;
  left: -99999px;
}
.scan-result-dialog {
  .scan-result-box {
    ::v-deep(.el-tabs__item){
      height: 30px;
      line-height: 30px;
    }
    .result-box-body-outer{
      height: calc(100vh - 420px);
    }
    .scan-again{
      display: flex;
      justify-content: flex-end;
      margin: 10px 0;
    }
    .result-box-body{
      .result-word.level-1{
        border-color: #FD463E;
        &.is-focus{
          background-color: rgba(253, 70, 62, 0.1);
        }
        .word-top p span{
          color: #FD463E;
        }
        .word-top p span.level-span{
          background-color: #FD463E;
        }
      }
      .result-word.level-2{
        border-color: #FF9700;
        &.is-focus{
          background-color: rgba(255, 151, 0, 0.1);
        }
        .word-top p span{
          color: #FF9700;
        }
        .word-top p span.level-span{
          background-color: #FF9700;
        }
      }
      .result-word.level-link{
        border-color: #4D99F2;
        .url-name{
          display: flex;
          p{
            color: #4D99F2;
            @include textEllipsis(18px,1);
          }
          span.level-span{
            display: block;
            height: 20px;
            line-height: 20px;
            background-color: #4D99F2;
            color: #fff;
            padding: 0 5px;
            border-radius: 4px;
            margin: 0 10px;
            font-size: 14px;
          }
        }
        .word-top p span.level-span{
          background-color: #4D99F2;
        }
      }
      .result-word{
        width: 100%;
        border: 1px solid #FD463E;
        border-top-width: 4px;
        margin-top: 10px;
        box-sizing: border-box;
        padding: 10px 30px;
        .word-top{
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;
          p{
            cursor: pointer;
            display: flex;
            align-items: center;
          }
          p i{
            transition: all 0.3s;
            transform: rotate(-90deg);
            &.is-collapse{
              transform: rotate(0);
            }
          }
          p span{
            color: #FD463E;
          }
          p span.level-span{
            display: block;
            height: 20px;
            line-height: 20px;
            background-color: #FD463E;
            color: #fff;
            padding: 0 5px;
            border-radius: 4px;
            margin: 0 10px;
            font-size: 14px;
          }
          span.adjust-word{
            color: #17b336;
          }
        }
        .word-more-msg{
          ::v-deep(.el-descriptions__body){
            background-color: inherit;
          }
        }
        .word-bottom{
          display: flex;
          justify-content: space-between;
          align-items: center;
          p{
            font-size: 14px;
          }
        }
      }
      .no-data{
        height: 300px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        i{
          font-size: 80px;
        }
      }
    }
    .result-box-body-empty{
      margin-top: 30px;
    }
  }
  .no-scan-result{
    width: 100%;
    height: 100%;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    i{
      font-size: 80px;
      color: #AAAAAA;
    }
    p{
      margin-bottom: 20px;
      color:#AAAAAA;
    }
  }
  .dialog-footer {
    display: flex;
    justify-content: space-between;
  }
}
.scan-pass{
  color: $mainColor;
}
.scan-no-pass{
  color: $failColor;
}
.more-btn{
  i{
    font-size: 24px;
  }
}
.cur-online-form-header{
  max-width: 90%;
  font-weight: 600;
}
// ::v-deep(.tinymce-box){
//   height: 700px;
//   overflow: scroll;
// }
.big-file{
  color: $warningColor;
  i{
    margin-right: 0 !important;
  }
}
</style>
